<template>
  <div class="container">
    <h1 class="topTitle"> 不同：包括热力图、电子地图、卫星地图</h1>
    <div class="mapContainer" :style="mapWindowStyle">
      <div id="map"></div>
    </div>
  </div>
</template>

<script>
import * as L from 'leaflet'
import 'wgis.leaflet.wmts.vue2';
import HeatmapOverlay from 'heatmap.js/plugins/leaflet-heatmap'
import 'leaflet-tilelayer-colorizr';
export default {
  name: 'MapDiffrentTheme',
  components: {
  },
  data() {
    return {
      map: null,
      url: "",
      attr: "",
      mapWindowStyle: {
        height: '0px'
      }
    }
  },
  methods: {
    getHeight() {
      this.mapWindowStyle.height = String(window.innerHeight - 120) + 'px';
    },
  },
  created() {
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },
  mounted() {
    //卫星图wmts方式
    /*var satelliteLayer= L.tileLayer.wmts(
            "http://fw1.qdlab.top:7981/geoserver/gwc/service/wmts",
            {
              layer: 'topp:beijing',//规定的图层名
              style: "",//使用样式
              tilematrixset: "mercator",//比例尺集EPSG:3857
              format: 'image/png',
              tileSize: 256,
              attribution: "<a href='https://github.com/pengge/wgis.leaflet.wmts.vue2'>GitHub </a>&copy; "
            }
    );*/
    // 卫星 XYZ 切片形式的地图 URL 地址
    var satelliteLayer = new L.tileLayer(
            "http://fw1.qdlab.top:7981/geoserver/gwc/service/tms/1.0.0/China@EPSG%3A3857@jpeg/{z}/{x}/{-y}.jpeg",
            {
              minZoom: 6,
              maxZoom: 6,
              center: [39.92, 116.46],
              zoom: 6,
              zoomControl: false,
              //attributionControl: false,
              crs: L.CRS.EPSG3857
            }
    );
    //地铁线路
    var railwayLayer= L.tileLayer.wmts(
            "http://fw1.qdlab.top:7981/geoserver/gwc/service/wmts",
            {
              layer: 'topp:BeijingRailway',//规定的图层名
              style: "",//使用样式
              tilematrixset: "mercator",//比例尺集EPSG:3857
              format: 'image/png',
              tileSize: 256,
              attribution: "<a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>&copy; <a href='http://www.ign.fr'>IGN</a>"
            }
    );
//卫星图 http://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6
    var colortileLayer =  L.tileLayer.colorizr("http://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}", {
      maxZoom: 18,
      minZoom: 3,
      colorize: function (pixel) {
        // 这个方法用来调整所有的图片上的rgb值，pixel是图片原有的rgb值
        //pixel.r += 60;
        //pixel.g += 17;
        pixel.b += 123;
        //pixel.a += 1;
        return pixel;
      }
    });
    // 热力图数据
    var heatmapData = {
      max: 8,
      data: [
        { lat: 39.90345, lng:  116.36655, count: 3 },
        { lat: 39.91314, lng: 116.37190, count: 1 },
        { lat: 39.91314, lng: 116.31190,  count: 9 },
        { lat: 39.91314, lng: 116.35190,  count: 8 },
        { lat: 39.91314, lng: 116.38190,  count: 7 },
        { lat: 39.91314, lng: 116.37190,  count: 6 },
        { lat: 39.91314, lng: 116.32190,  count: 5 }
      ]
    }
    // 热力图配置
    var heatmapcfg = {
      'radius': 0.011,
      'maxOpacity': 0.8,
      'scaleRadius': true,
      'useLocalExtrema': true,
      latField: 'lat',
      lngField: 'lng',
      valueField: 'count'
    }
    this.heatmapLayer = new HeatmapOverlay(heatmapcfg)
    this.heatmapLayer.setData(heatmapData)


    let map = L.map("map", {
      minZoom: 6,
      maxZoom: 6,
      center: [39.92, 116.46],
      zoom: 6,
      zoomControl: false,
      crs: L.CRS.EPSG3857,
    });
    map.addLayer(satelliteLayer);
    /*
    map.addLayer(railwayLayer);
    map.addLayer(this.heatmapLayer);*/
    //map.addLayer(colortileLayer);


    // 底图图层
    let Map_BaseLayer = {
      "卫星图层": satelliteLayer,
      "地铁图层": railwayLayer,
      "热力图层": this.heatmapLayer,
      "颜色调整": colortileLayer
    };
    L.control.layers(null,Map_BaseLayer).addTo(map);
    this.map = map;
    this.map.on('click', function(e) {
      console.log('纬度：' + e.latlng.lat + '\n经度：' + e.latlng.lng);
    });
  }
}
</script>

<style lang="stylus" scoped>
@import 'leaflet/dist/leaflet.css'
@import "leaflet-draw/dist/leaflet.draw.css"
.leaflet-zoom-animated img {
  -webkit-filter: invert(50%) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
  -ms-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
  -moz-filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(10%) !important;
  filter: invert(1) grayscale(0) saturate(0.5) brightness(1.6) opacity(1) hue-rotate(334deg) sepia(1%) !important;
}
.container
  width: 100%
  h1.topTitle
    text-align: center
  .mapContainer
    border: 1px solid red
    text-align: left
    #map
      height: 100%
      width: 100%
</style>